<template>
  <div>
    <template v-if="isAllocate">
      <!-- 按钮 -->
      <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
        @click="getRoleList"></el-button>
      <el-button type="primary" icon="el-icon-plus" style="margin:10px 0" @click="getShow">添加</el-button>
      <!-- 表格 
        data 展示数据 —— 数组类型
      -->
      <el-table style="width: 100%;" border :data="list">
        <el-table-column prop="roleName" label="角色名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="intro" label="角色描述" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="{ row, $index }">
            <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
            <el-tooltip content="分配权限" placement="top" slot="reference">
              <el-button type="info" icon="el-icon-user" @click="addIsAllocate(row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改角色" placement="top" slot="reference">
              <el-button type="primary" icon="el-icon-edit" @click="goUpdate(row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除角色" placement="top" slot="reference">
              <el-button type="danger" icon="el-icon-delete" @click="deleteRole(row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination> -->

      <!-- 对话框  -->
      <el-dialog :title="state ? '添加角色' : '修改角色'" :visible.sync="dialogFormVisible">
        <el-form style="width:80%" :model="tmForm" :rules="rules" ref="ruleForm">
          <el-form-item label="角色名称" label-width="100px" prop="roleName">
            <el-input autocomplete="off" v-model="tmForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" label-width="100px" prop="intro">
            <el-input autocomplete="off" v-model="tmForm.intro"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRole" v-if="state">确 定</el-button>
          <el-button type="primary" @click="updatePenaltyConfiguration" v-else>修改</el-button>
        </div>
      </el-dialog>
    </template>

    <template v-else>
      <div style="margin:30px">
        <el-tree :data="trees" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
          :props="defaultProps" :default-checked-keys="defaultId">
        </el-tree>
      </div>

      <div style="margin:40px 20px 20px 20px">
        <el-button type="primary" @click="getCheckedKeys">确认</el-button>
        <el-button type="danger" @click="isAllocate = true">取消</el-button>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Grouping',
  data() {
    return {
      //列表数据
      list: [],
      dialogFormVisible: false,
      tmForm: {
        roleName: '',
        intro: ''
      },
      state: false,
      // 分配权限
      isAllocate: true,
      // 分配角色id
      roleId: '',
      // 默认权限
      defaultId: '',
      // 表单验证
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        intro: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      trees: [],
      defaultProps: {
        children: 'sonPermissionList',
        label: 'permName'
      }
    }
  },
  mounted() {
    this.getRoleList();
    this.getRolePermissionList()
  },
  methods: {
    async getRoleList() {
      let res = await this.$API.permissions.getRoleList();
      this.list = res.data;
    },
    // 权限树
    async getRolePermissionList() {
      let res = await this.$API.permissions.getRolePermissionList();
      this.trees = res.data;
    },
    // 点击添加
    getShow() {
      this.state = true
      this.dialogFormVisible = true
      this.tmForm = {
        pid: '',
        type: '',
        path: '',
        permCode: '',
        permName: ''
      }
    },
    addRole() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$API.permissions.addRole(this.tmForm);
          this.dialogFormVisible = false;
          this.getRoleList()
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    async addIsAllocate(id) {
      this.roleId = id;
      let res = await this.$API.permissions.getRolePermission({
        roleId: id
      })
      this.defaultId = res.data;
      this.isAllocate = false;
    },
    // 添加权限
    async getCheckedKeys() {
      let keys = this.$refs.tree.getCheckedKeys();
      let res = await this.$API.permissions.addRolePermission({
        roleId: this.roleId,
        permissionIds: keys.toString()
      });
      this.isAllocate = true
    },
    // 点击修改
    goUpdate(row) {
      this.state = false
      this.dialogFormVisible = true;
      // 浅拷贝  让tmForm收到的数据非服务器直接传回的数据
      this.tmForm = { ...row };
    },
    // 修改角色
    updatePenaltyConfiguration() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$API.permissions.updatePenaltyConfiguration(this.tmForm);
          this.dialogFormVisible = false;
          this.getRoleList()
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 删除
    async deleteRole(id) {
      let res = await this.$API.permissions.deleteRole({ id: id });
      this.getRoleList();
    }
  }
}
</script>

<style>

</style>